<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test v-charts bar</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
	</head>
	<body>
		<div id="app">
			<!-- <ve-bar :data="chartData" :settings="chartSettings"></ve-bar> -->
			<!-- <ve-pie :data="chartData" :settings="chartSettings"></ve-pie> -->
			<!-- <ve-ring :data="chartData" :settings="chartSettings"></ve-ring> -->
			<ve-scatter :data="chartData" :settings="chartSettings"></ve-scatter>
			<!-- <ve-line :data="chartData" :settings="chartSettings"></ve-line> -->
		</div>
	</body>
	
	<script>
		new Vue({
			el:'#app',
			data(){
				this.chartSettings = {
					// ring
					// radius:[100,50],
					// itemStyle:{
					// 	opacity:0.8
					// }
					
					// line
					// axisSite:{
					// 	left:['访问用户'], //左y轴数据
					// 	right:['下单用户'] //右y轴数据
					// },
					// yAxisName:['访问用户','下单用户'] ,//左、右y轴名称
					
					//bar
					// dimension:['日期'],
					// metrics:['访问用户','下单用户'],
					// yAxisType:['KMB'],
					//  xAxisType: 'category',
					//  //设置堆叠
					//  stack: { 
					//          // '用户': ['访问用户', '下单用户']
					//        }
				}
				return{
					chartData:{
						 columns: ['日期', '访问用户', '下单用户'],
						  rows: [
						    { '日期': '2018-05-22', '访问用户': 3371, '下单用户': 610 },
						    { '日期': '2018-05-23', '访问用户': 2328, '下单用户': 398 },
						    { '日期': '2018-05-24', '访问用户': 5381, '下单用户': 410 }
						  ]
					}
				}
			}
		})
	</script>
</html>
